<template>
  <scroll-view enable-back-to-top scroll-y class="viewport">
    <view class="container">
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/dingdan.png" />
            </view>
          </view>
          <view class="bg-light"> 充电枪:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].gunId }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/dingdan.png" />
            </view>
          </view>
          <view class="bg-light"> 订单ID::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].orderId }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/jiesuan.png" />
            </view>
          </view>
          <view class="bg-light"> 结算状态::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].orderState }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/dianliu.png" />
            </view>
          </view>
          <view class="bg-light"> 充电电流::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].voltage }}</view>
        </view>
      </view>

      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/chongdiandianliu.png" />
            </view>
          </view>
          <view class="bg-light"> 充电电量::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].soc }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/shichang.png" />
            </view>
          </view>
          <view class="bg-light"> 开始时间::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].startTime }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/shichang.png" />
            </view>
          </view>
          <view class="bg-light"> 结束时间::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].endTime }}</view>
        </view>
      </view>

      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/shichang.png" />
            </view>
          </view>
          <view class="bg-light"> 充电时长::</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingOrder?.list[0].times }}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onHide, onLoad, getSsrGlobalData } from '@dcloudio/uni-app'
import { getChargingOrderinfo } from '@/services/charge'
import type { chargeOrderParams, getChargingOrder } from '@/types/charge'
onLoad((options) => {
  if (options && options.orderId) {
    orderId.value = options.orderId

    getorderInfo(options.orderId)
  }
})
const orderId = ref('')
const chargingOrder = ref<getChargingOrder>()

const getorderInfo = async (orderId: string) => {
  const queryParams: Required<chargeOrderParams> = {
    page: '1',
    limit: '2',
    orderId: orderId,
  }

  const order = await getChargingOrderinfo(queryParams)
  console.log(order)
  if (Number(order.code) == 0) {
    chargingOrder.value = order.data
    uni.showToast({
      title: order.msg || '获取数据成功',
      icon: 'success',
    })
  } else {
    uni.showToast({
      title: order.msg || '获取数据失败',
      icon: 'error',
    })
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
